<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现滚动图片</title>
    <!-- <link rel="stylesheet" href="js_滚动图片.css"> -->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #div1 {
            width: 712px;
            height: 108px;
            margin: 100px auto;
            /* 相对定位 */
            position: relative;
            overflow: hidden;
            border:1px black solid;
        }

        #div1 ul {
            /* 绝对定位，位置取决于跟div */
            position: absolute;
            left: 0;
            top: 0;
        }

        #div1 ul li {
            float: left;
            width: 178px;
            height: 108px;
            list-style: none;
            margin-left: 10px;
            border:3px black solid;
        }
    </style>
    <!-- <script src="js_滚动图片.js"></script> -->
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oUl = document.getElementsByTagName('ul')[0];
            var Li = oUl.getElementsByTagName('li');//获取ul下的所有li
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;//li下的内容进行相加
            oUl.style.width = Li[0].offsetWidth * Li.length + 'px';//ul的宽度等于每个li的宽度乘以所有li的长度
            var speed = 2

            //主方法
            function move() {
                //如果左边横向滚动了长度一半之后,回到初始位置

                if (oUl.offsetLeft < -oUl.offsetWidth / speed) {
                    oUl.style.left = '0'
                }
                //如果右边横向滚动的距离大于0 就让他的位置回到一半
                if (oUl.offsetLeft > 0) {
                    oUl.style.left = -oUl.offsetWidth / speed + 'px';
                }
                oUl.style.left = oUl.offsetLeft-speed+'px';//进行左横向滚动
                // oUl.style.left = oUl.offsetLeft + speed + 'px';//进行右横向滚动
            }
            //调用方法
            var timer = setInterval(move, 30)
            //鼠标指向的时候 暂停
            oDiv.onmouseover = function () {
                clearInterval(timer);
            }
            //鼠标离开之后 继续滚动
            oDiv.onmouseout = function () {
                timer = setInterval(move, 30)
            }
        }
    </script>
</head>

<body>
    <div id="div1">
        <ul>
            <li><img src="img/img1.jpg" alt=""></li>
            <li><img src="img/img2.jpg" alt=""></li>
            <li><img src="img/img3.jpg" alt=""></li>
            <li><img src="img/img4.jpg" alt=""></li>
            <li><img src="img/img5.jpg" alt=""></li>
            <li><img src="img/img6.jpg" alt=""></li>

        </ul>
    </div>
</body>

</html>